<template>
  <div class="editTable" ref="editTableBox">
    <div class="edit-table-toolbar">
      <div class="edit-table-toolbar__title">
        <span class="redPoint" v-if="mustColumn.length">*</span>
        {{ title }}
      </div>
      <div class="edit-btn" v-if="!hideBtn">
        <slot name="btnsBefore"></slot>
        <template v-for="(i, index) in btnConfig">
          <el-button
            size="mini"
            :key="index"
            v-if="showBtn(i.name)"
            :type="i.type"
            :icon="i.icon"
            @click="i.methons"
            class="btn-text-blue"
          >{{ i.text }}</el-button>
        </template>
        <slot name="btnsAfter"></slot>
      </div>
    </div>
    <div class="edit-table-content">
      <el-form ref="formTable" :model="tableConfig" :rules="rules" label-width="0px">
        <el-table
          :data="tableConfig.data"
          border
          stripe
          highlight-current-row
          ref="editTable"
          :header-cell-style="headerStyle"
          :height="tableConfig.height"
          :max-height="tableConfig.maxHeight"
          :header-cell-class-name="mustColumnMethods"
        >
          <el-table-column type="index" width="55" label="序号"></el-table-column>
          <template v-for="(item, index) in tableConfig.column">
            <el-table-column
              v-if="!item.isHide"
              :label="item.label"
              :width="item.width"
              align="center"
              :min-width="item.minWidth"
              :prop="item.prop"
              :key="index"
            >
              <template slot-scope="scope">
                <el-form-item
                  :prop="'data.' + scope.$index + '.' + scope.column.property"
                  :rules="rules[item.prop]"
                >
                  <!-- <span class="requiredPot">*</span> -->
                  <!-- 自定义插槽 -->
                  <slot :name="item.prop" :item="item" :editFormInfo="scope.row">
                    <!-- <el-form-item :prop="'data.'+ scope.$index + '.'+item.prop"> -->
                    <template v-if="scope.row.editable">
                      <template v-if="item.isChange">
                        <el-select
                          v-model="scope.row[scope.column.property]"
                          v-if="scope.row.inputType === 'select'"
                          :multiple="scope.row.multiple"
                          :disabled="item.disabled"
                          @change="(val) => changeSelete(val, item,scope.row)"
                          size="mini"
                          class="w100"
                        >
                          <template v-for="item_s in scope.row.option">
                            <el-option
                              v-if="
                              typeof scope.row[scope.column.property] ==
                              'string'
                            "
                              :key="item_s.value"
                              :label="item_s.label"
                              :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                              :value="item_s"
                            ></el-option>
                            <el-option
                              v-else-if="
                              typeof scope.row[scope.column.property] ==
                              'number'
                            "
                              :key="item_s.value"
                              :label="item_s.label"
                              :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                              :value="item_s"
                            ></el-option>
                            <el-option
                              v-else
                              :key="item_s.value"
                              :label="item_s.label"
                              :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                              :value="item_s"
                            ></el-option>
                          </template>
                        </el-select>
                        <el-select
                          v-model="scope.row[scope.column.property]"
                          v-else-if="scope.row.inputType === 'select-group'"
                          :multiple="item.multiple"
                          :disabled="item.disabled"
                          @change="(val) => changeSeleteGroup(val, item, scope.row)"
                          size="mini"
                          class="w100"
                        >
                          <el-option-group
                            v-for="group in item.seleteOption"
                            :key="group.label"
                            :label="group.label"
                          >
                            <template v-for="item_s in group.options">
                              <el-option
                                v-if="
                              typeof scope.row[scope.column.property] ==
                              'string'
                            "
                                :key="item_s.value"
                                :label="item_s.label"
                                :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                :value="item_s"
                              ></el-option>
                              <el-option
                                v-else-if="
                              typeof scope.row[scope.column.property] ==
                              'number'
                            "
                                :key="item_s.value"
                                :label="item_s.label"
                                :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                :value="item_s"
                              ></el-option>
                              <el-option
                                v-else
                                :key="item_s.value"
                                :label="item_s.label"
                                :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                :value="item_s"
                              ></el-option>
                            </template>
                          </el-option-group>
                        </el-select>
                        <el-date-picker
                          v-else-if="
                          [
                            'date',
                            'week',
                            'month',
                            'week',
                            'year',
                            'datetime',
                            'daterange',
                            'datetimerange',
                          ].includes(scope.row.inputType)
                        "
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                          class="w100"
                          :type="scope.row.inputType"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :disabled="item.disabled"
                          :format="dateFrm(scope.row.inputType)"
                          :value-format="dateFrm(scope.row.inputType)"
                          @change="(val) => inputChange(val, item, scope.row)"
                          size="mini"
                          placeholder="选择日期"
                        ></el-date-picker>
                        <!-- 选择人员、组织 -->
                        <el-input
                          v-else-if="
                          [
                            'user',
                            'user-realNameMember',
                            'user-pdMember',
                            'dept',
                            'dept-orgAuth',
                            'dept-pdOrg',
                            'location',
                          ].includes(scope.row.inputType) &&
                          (item.isShow ? item.isShow(scope.row) : true)
                        "
                          size="mini"
                          @change="(val) => inputChange(val, item)"
                          :fetch-suggestions="querySearchAsync(item)"
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                          :placeholder="item.placeholder || '请选择'"
                          :disabled="item.disabled"
                          readonly
                        >
                          <el-button
                            slot="append"
                            :icon="
                            ['user', 'user-pdMember'].includes(scope.row.inputType)
                              ? 'el-icon-user'
                              : 'el-icon-location'
                          "
                            :disabled="item.disabled || item.readonly"
                            @click="goSeleteOrgMember(scope.row, item, scope.row.inputType)"
                          ></el-button>
                        </el-input>
                        <span
                          class="selectDiv"
                          v-else-if="
                          [
                            'dept-select',
                            'user-select',
                            'location-select',
                            'device-select',
                          ].includes(scope.row.inputType)
                        "
                          :class="{ multipleDiv: scope.row.multiple }"
                        >
                          <span class="selectContent" :class="'line' + item.rows">
                            <el-select
                              ref="selectItem"
                              size="mini"
                              filterable
                              clearable
                              remote
                              reserve-keyword
                              default-first-option
                              v-model="editFormData[item.propArr]"
                              :disabled="item.disabled"
                              :multiple="scope.row.multiple"
                              :multiple-limit="item.multipleNum || 6"
                              :loading="selectLoading"
                              :placeholder="item.placeholder || '请选择'"
                              :remote-method="
                              (query) => {
                                getSelectOption(query, item);
                              }
                            "
                              @change="(val) => selectChange(val, item)"
                              @clear="orgComClear(item)"
                              @visible-change="(val) => clearOther(val, item)"
                              @remove-tag="(val) => removeTag(val, item)"
                              popper-class="userSelect"
                            >
                              <el-option
                                v-for="(optionItem, index) in item.option"
                                :key="index"
                                :label="
                                optionItem.label + ' ' + outOrgSign(optionItem)
                              "
                                :value="optionItem.value"
                              >
                                <div class="itemConten">
                                  <div class="itemConten-item itemConten-top">
                                    <span style="float: left">
                                      {{ optionItem.label }}
                                      {{ outOrgSign(optionItem) }}
                                    </span>
                                    <span
                                      style="
                                      float: right;
                                      color: #979797;
                                      font-size: 13px;
                                    "
                                      v-if="scope.row.inputType == 'user-select'"
                                    >{{ optionItem.orgName }}</span>
                                  </div>
                                  <div class="itemConten-item itemConten-bottom">
                                    <span class="pathName">
                                      {{ optionItem.levelPathName }}
                                      {{ optionItem.fullPathName }}
                                    </span>
                                  </div>
                                </div>
                              </el-option>
                            </el-select>
                            <el-button
                              class="selectBtn"
                              slot="append"
                              :icon="
                              ['user-select'].includes(scope.row.inputType)
                                ? 'el-icon-user'
                                : 'el-icon-location'
                            "
                              :disabled="item.disabled || item.readonly"
                              @click="goSelectUser(item, scope.row.inputType)"
                            ></el-button>
                          </span>
                        </span>
                        <el-input
                          v-else-if="scope.row.inputType  === 'number'"
                          :key="scope.$index"
                          size="mini"
                          :readonly="item.readonly"
                          :disabled="item.disabled"
                          :type="scope.row.inputType || ''"
                          @change="item.methods ? item.methods(scope.row) : ''"
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                          @wheel.native.prevent="stopScrollFun($event, scope.row.inputType)"
                          class="w100"
                        ></el-input>
                        <el-input-number
                          v-else-if="scope.row.inputType === 'el-number'"
                          :key="scope.$index"
                          size="mini"
                          v-model="scope.row[scope.column.property]"
                          :precision="item.precision"
                          :step="item.step"
                          :max="item.max"
                          :min="item.min"
                          :step-strictly="item.stepStrictly"
                          :disabled="item.disabled"
                          controls-position="right"
                          :placeholder="item.placeholder || '请输入'"
                          @change="item.methods ? item.methods(scope.row) : ''"
                          class="w100"
                        ></el-input-number>
                        <!--设备分类-->
                        <el-input
                          v-else-if="scope.row.inputType == 'deviceClassify'"
                          size="mini"
                          :title="scope.row[scope.column.property]"
                          v-model="scope.row[scope.column.property]"
                          :placeholder="item.placeholder || '请选择'"
                          readonly
                          :disabled="item.disabled"
                        >
                          <el-button
                            style="font-size: 16px"
                            slot="append"
                            icon="el-icon-setting"
                            :disabled="item.disabled"
                            @click="
                            goSeleteOrgMember(scope.row, item, 'deviceClassify')
                          "
                          ></el-button>
                        </el-input>
                        <!--选择设备-->
                        <el-input
                          v-else-if="scope.row.inputType == 'device'"
                          size="mini"
                          :title="scope.row[scope.column.property]"
                          v-model="scope.row[scope.column.property]"
                          :placeholder="item.placeholder || '请选择'"
                          :disabled="item.disabled"
                          readonly
                        >
                          <el-button
                            style="font-size: 16px"
                            slot="append"
                            icon="el-icon-setting"
                            :disabled="item.disabled"
                            @click="goSeleteOrgMember(scope.row, item, 'device')"
                          ></el-button>
                        </el-input>
                        <el-input
                          v-else-if="scope.row.inputType == 'click'"
                          :key="scope.$index"
                          size="mini"
                          :readonly="item.readonly"
                          :disabled="item.disabled"
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                        >
                          <el-button
                            style="font-size: 16px"
                            slot="append"
                            :icon="item.icon || ''"
                            :disabled="item.disabled"
                            @click="() => item.methods(scope.row, scope.$index)"
                          ></el-button>
                        </el-input>
                        <!-- 确认框 -->
                        <el-checkbox
                          v-model="scope.row[scope.column.property]"
                          v-else-if="scope.row.inputType === 'checkbox'"
                          :true-label="1"
                          :false-label="0"
                          @change="
                          item.methods ? item.methods(scope.row, item) : ''
                        "
                          :disabled="item.disabled"
                        ></el-checkbox>
                        <!-- 纯文本 -->
                        <span
                          v-else-if="scope.row.inputType === 'disableText' || item.isShow"
                        >{{ scope.row[scope.column.property] }}</span>
                        <el-input
                          v-else
                          :key="scope.$index"
                          :autosize="item.autosize || false"
                          size="mini"
                          :readonly="item.readonly"
                          :disabled="item.disabled"
                          :type="scope.row.inputType || ''"
                          :rows="item.rows || 1"
                          @change="
                          item.methods
                            ? item.methods(scope.row, scope.$index)
                            : ''
                        "
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                        ></el-input>
                      </template>
                      <template v-else>
                        <el-select
                          v-model="scope.row[scope.column.property]"
                          v-if="item.type === 'select'"
                          :multiple="item.multiple"
                          :disabled="item.disabled"
                          @change="(val) => changeSelete(val, item, scope.row)"
                          size="mini"
                          class="w100"
                        >
                          <template v-for="item_s in item.seleteOption">
                            <el-tooltip
                              class="item"
                              effect="dark"
                              :content="item_s.content"
                              :disabled="!item_s.disabled"
                              :placement="item_s.placement || 'top'"
                              :key="item_s.value"
                              v-if="!item_s.hide"
                            >
                              <el-option
                                v-if="
                              typeof scope.row[scope.column.property] ==
                              'string'
                            "
                                :key="item_s.value"
                                :label="item_s.label"
                                :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s, tableConfig.data)
                            "
                                :value="'' + item_s.value"
                              ></el-option>
                              <el-option
                                v-else-if="
                              typeof scope.row[scope.column.property] ==
                              'number'
                            "
                                :key="item_s.value"
                                :label="item_s.label"
                                :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s, tableConfig.data)
                            "
                                :value="
                              ('' + item_s.value).trim() == ''
                                ? ''
                                : parseInt(item_s.value)
                            "
                              ></el-option>
                              <el-option
                                v-else
                                :key="item_s.value"
                                :label="item_s.label"
                                :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s, tableConfig.data)
                            "
                                :value="item_s.value"
                              ></el-option>
                            </el-tooltip>
                          </template>
                        </el-select>
                        <el-select
                          v-model="scope.row[scope.column.property]"
                          v-else-if="item.type === 'select-group'"
                          :multiple="item.multiple"
                          :disabled="item.disabled"
                          @change="(val) => changeSeleteGroup(val, item, scope.row)"
                          size="mini"
                          class="w100"
                        >
                          <template v-if="item.isDifOption">
                            <el-option-group
                              v-for="group in scope.row[item.optionField]"
                              :key="group.label"
                              :label="group.label"
                            >
                              <template v-for="item_s in group.options">
                                <el-option
                                  v-if="
                              typeof scope.row[scope.column.property] ==
                              'string'
                            "
                                  :key="item_s.value"
                                  :label="item_s.label"
                                  :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                  :value="item_s"
                                ></el-option>
                                <el-option
                                  v-else-if="
                              typeof scope.row[scope.column.property] ==
                              'number'
                            "
                                  :key="item_s.value"
                                  :label="item_s.label"
                                  :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                  :value="item_s"
                                ></el-option>
                                <el-option
                                  v-else
                                  :key="item_s.value"
                                  :label="item_s.label"
                                  :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                  :value="item_s"
                                ></el-option>
                              </template>
                            </el-option-group>
                          </template>
                          <template v-else>
                            <el-option-group
                              v-for="group in item.seleteOption"
                              :key="group.label"
                              :label="group.label"
                            >
                              <template v-for="item_s in group.options">
                                <el-option
                                  v-if="
                              typeof scope.row[scope.column.property] ==
                              'string'
                            "
                                  :key="item_s.value"
                                  :label="item_s.label"
                                  :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                  :value="item_s"
                                ></el-option>
                                <el-option
                                  v-else-if="
                              typeof scope.row[scope.column.property] ==
                              'number'
                            "
                                  :key="item_s.value"
                                  :label="item_s.label"
                                  :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                  :value="item_s"
                                ></el-option>
                                <el-option
                                  v-else
                                  :key="item_s.value"
                                  :label="item_s.label"
                                  :disabled="
                              item.hasOwnProperty('disabledOp') &&
                              item.disabledOp(item_s.value, tableConfig.data)
                            "
                                  :value="item_s"
                                ></el-option>
                              </template>
                            </el-option-group>
                          </template>
                        </el-select>
                        <el-date-picker
                          v-else-if="
                          [
                            'date',
                            'week',
                            'month',
                            'week',
                            'year',
                            'datetime',
                            'daterange',
                            'datetimerange',
                          ].includes(item.type)
                        "
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                          class="w100"
                          :type="item.type"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :disabled="item.disabled"
                          :format="dateFrm(item.type)"
                          :value-format="dateFrm(item.type)"
                          @change="(val) => inputChange(val, item, scope.row)"
                          size="mini"
                          placeholder="选择日期"
                        ></el-date-picker>
                        <!-- 选择人员、组织 -->
                        <el-input
                          v-else-if="
                          [
                            'user',
                            'user-realNameMember',
                            'user-pdMember',
                            'dept',
                            'dept-orgAuth',
                            'dept-pdOrg',
                            'location',
                          ].includes(item.type) &&
                          (item.isShow ? item.isShow(scope.row) : true)
                        "
                          size="mini"
                          @change="(val) => inputChange(val, item)"
                          :fetch-suggestions="querySearchAsync(item)"
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                          :placeholder="item.placeholder || '请选择'"
                          :disabled="item.disabled"
                          readonly
                        >
                          <el-button
                            slot="append"
                            :icon="
                            ['user', 'user-pdMember'].includes(item.type)
                              ? 'el-icon-user'
                              : 'el-icon-location'
                          "
                            :disabled="item.disabled || item.readonly"
                            @click="goSeleteOrgMember(scope.row, item, item.type)"
                          ></el-button>
                        </el-input>
                        <span
                          class="selectDiv"
                          v-else-if="
                          [
                            'dept-select',
                            'user-select',
                            'location-select',
                            'device-select',
                          ].includes(item.type)
                        "
                          :class="{ multipleDiv: item.multiple }"
                        >
                          <span class="selectContent" :class="'line' + item.rows">
                            <el-select
                              ref="selectItem"
                              size="mini"
                              filterable
                              clearable
                              remote
                              reserve-keyword
                              default-first-option
                              v-model="editFormData[item.propArr]"
                              :disabled="item.disabled"
                              :multiple="item.multiple"
                              :multiple-limit="item.multipleNum || 6"
                              :loading="selectLoading"
                              :placeholder="item.placeholder || '请选择'"
                              :remote-method="
                              (query) => {
                                getSelectOption(query, item);
                              }
                            "
                              @change="(val) => selectChange(val, item)"
                              @clear="orgComClear(item)"
                              @visible-change="(val) => clearOther(val, item)"
                              @remove-tag="(val) => removeTag(val, item)"
                              popper-class="userSelect"
                            >
                              <el-option
                                v-for="(optionItem, index) in item.option"
                                :key="index"
                                :label="
                                optionItem.label + ' ' + outOrgSign(optionItem)
                              "
                                :value="optionItem.value"
                              >
                                <div class="itemConten">
                                  <div class="itemConten-item itemConten-top">
                                    <span style="float: left">
                                      {{ optionItem.label }}
                                      {{ outOrgSign(optionItem) }}
                                    </span>
                                    <span
                                      style="
                                      float: right;
                                      color: #979797;
                                      font-size: 13px;
                                    "
                                      v-if="item.type == 'user-select'"
                                    >{{ optionItem.orgName }}</span>
                                  </div>
                                  <div class="itemConten-item itemConten-bottom">
                                    <span class="pathName">
                                      {{ optionItem.levelPathName }}
                                      {{ optionItem.fullPathName }}
                                    </span>
                                  </div>
                                </div>
                              </el-option>
                            </el-select>
                            <el-button
                              class="selectBtn"
                              slot="append"
                              :icon="
                              ['user-select'].includes(item.type)
                                ? 'el-icon-user'
                                : 'el-icon-location'
                            "
                              :disabled="item.disabled || item.readonly"
                              @click="goSelectUser(item, item.type)"
                            ></el-button>
                          </span>
                        </span>
                        <el-input
                          v-else-if="item.type === 'number'"
                          :key="scope.$index"
                          size="mini"
                          :readonly="item.readonly"
                          :disabled="item.disabled"
                          :type="item.type || ''"
                          @change="item.methods ? item.methods(scope.row) : ''"
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                          @wheel.native.prevent="stopScrollFun($event, item.type)"
                          class="w100"
                        ></el-input>
                        <el-input-number
                          v-else-if="item.type === 'el-number'"
                          :key="scope.$index"
                          size="mini"
                          v-model="scope.row[scope.column.property]"
                          :precision="item.precision"
                          :step="item.step"
                          :max="item.max"
                          :min="item.min"
                          :step-strictly="item.stepStrictly"
                          :disabled="item.disabled"
                          controls-position="right"
                          :placeholder="item.placeholder || '请输入'"
                          @change="item.methods ? item.methods(scope.row) : ''"
                          class="w100"
                        ></el-input-number>
                        <!--设备分类-->
                        <el-input
                          v-else-if="item.type == 'deviceClassify'"
                          size="mini"
                          :title="scope.row[scope.column.property]"
                          v-model="scope.row[scope.column.property]"
                          :placeholder="item.placeholder || '请选择'"
                          readonly
                          :disabled="item.disabled"
                        >
                          <el-button
                            style="font-size: 16px"
                            slot="append"
                            icon="el-icon-setting"
                            :disabled="item.disabled"
                            @click="
                            goSeleteOrgMember(scope.row, item, 'deviceClassify')
                          "
                          ></el-button>
                        </el-input>
                        <!--选择设备-->
                        <el-input
                          v-else-if="item.type == 'device'"
                          size="mini"
                          :title="scope.row[scope.column.property]"
                          v-model="scope.row[scope.column.property]"
                          :placeholder="item.placeholder || '请选择'"
                          :disabled="item.disabled"
                          readonly
                        >
                          <el-button
                            style="font-size: 16px"
                            slot="append"
                            icon="el-icon-setting"
                            :disabled="item.disabled"
                            @click="goSeleteOrgMember(scope.row, item, 'device')"
                          ></el-button>
                        </el-input>
                        <el-input
                          v-else-if="item.type == 'click'"
                          :key="scope.$index"
                          size="mini"
                          :readonly="item.readonly"
                          :disabled="item.disabled"
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                        >
                          <el-button
                            style="font-size: 16px"
                            slot="append"
                            :icon="item.icon || ''"
                            :disabled="item.disabled"
                            @click="() => item.methods(scope.row, scope.$index)"
                          ></el-button>
                        </el-input>
                        <!-- 确认框 -->
                        <el-checkbox
                          v-model="scope.row[scope.column.property]"
                          v-else-if="item.type === 'checkbox'"
                          :true-label="1"
                          :false-label="0"
                          @change="
                          item.methods ? item.methods(scope.row, item) : ''
                        "
                          :disabled="item.disabled"
                        ></el-checkbox>
                        <!-- 纯文本 -->
                        <span
                          v-else-if="item.type === 'disableText' || item.isShow"
                        >{{ scope.row[scope.column.property] }}</span>
                        <el-input
                          v-else
                          :key="scope.$index"
                          :autosize="item.autosize || false"
                          size="mini"
                          :readonly="item.readonly"
                          :disabled="item.disabled"
                          :type="item.type || ''"
                          :rows="item.rows || 1"
                          @change="
                          item.methods
                            ? item.methods(scope.row, scope.$index)
                            : ''
                        "
                          v-model="scope.row[scope.column.property]"
                          :title="scope.row[scope.column.property]"
                        ></el-input>
                      </template>
                    </template>
                    <template v-else-if="item.type == 'switch'">
                      <el-switch
                        class="switch"
                        v-model="scope.row[scope.column.property]"
                        :active-value="1"
                        active-color="#1890ff"
                        :active-text="item.activeText || '是'"
                        :inactive-value="0"
                        inactive-color="#ccc"
                        :inactive-text="item.inactiveText || '否'"
                        :disabled="item.disabled"
                        @change="
                          item.methods
                            ? item.methods(scope.row, scope.$index)
                            : ''
                        "
                      ></el-switch>
                    </template>
                    <template v-else>
                      <el-tooltip
                        effect="dark"
                        v-if="item.showTooltip"
                        placement="top"
                        :content="
                          item.formatter
                            ? item.formatter(
                                scope.row[scope.column.property],
                                scope.row
                              )
                            : item.text
                            ? formatterNull(scope.row[item.text])
                            : formatterNull(scope.row[scope.column.property])
                        "
                      >
                        <span
                          class="table-cloumn__span--tooltip w100"
                          style="display: inline-block"
                        >
                          {{
                          item.formatter
                          ? item.formatter(
                          scope.row[scope.column.property],
                          scope.row
                          )
                          : item.text
                          ? formatterNull(scope.row[item.text])
                          : formatterNull(scope.row[scope.column.property])
                          }}
                        </span>
                      </el-tooltip>
                      <span v-else>
                        {{
                        item.formatter
                        ? item.formatter(
                        scope.row[scope.column.property],
                        scope.row
                        )
                        : item.text
                        ? formatterNull(scope.row[item.text])
                        : formatterNull(scope.row[scope.column.property])
                        }}
                      </span>
                    </template>
                  </slot>
                </el-form-item>
              </template>
            </el-table-column>
          </template>
          <el-table-column
            :width="tableConfig.buttonWidth"
            align="center"
            label="操作"
            prop="operate"
            v-if="
              showOperate || (!hideBtn && tableConfig.buttonArr.length != 0)
            "
          >
            <template slot-scope="scope">
              <template v-for="(btnItem, btnIndex) in tableConfig.buttonArr">
                <el-button
                  type="text"
                  size="small"
                  :key="btnIndex"
                  :icon="btnItem.icon"
                  v-if="btnItem.isShow(scope.row, scope.$index)"
                  @click="() => btnItem.methods(scope.row, scope.$index)"
                >{{ btnItem.name }}</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <dialogPublic
        :title="dialogTitle"
        :show.sync="show"
        @doSubmit="addSeleteMember"
        @doClose="() => (show = false)"
      >
        <orgMemberSelect
          ref="orgMemberSelect"
          v-if="show"
          :otherInfo="formData"
          :seleteSetting="orgMemberSelect"
        ></orgMemberSelect>
      </dialogPublic>
      <dialogPublic
        title="信息选择"
        :show.sync="showUser"
        @doSubmit="newMemberSelect"
        @doClose="() => (showUser = false)"
        :fullscreen="true"
        appendTobody
      >
        <newMemberSelect ref="newMember" v-if="showUser" :seleteSetting="orgMemberSelect"></newMemberSelect>
      </dialogPublic>
      <dialogPublic
        title="信息选择"
        :show.sync="showDevice"
        @doSubmit="newMemberSelect"
        @doClose="() => (showDevice = false)"
        :fullscreen="true"
        appendTobody
      >
        <equipmentSelect ref="newMember" v-if="showDevice" :seleteSetting="orgMemberSelect"></equipmentSelect>
      </dialogPublic>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableSetting: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    hideBtn: {
      type: Boolean,
      default: false
    },
    showOperate: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    mustColumn: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      title: "表格标题",
      dialogTitle: "信息选择",
      showUser: false,
      showDevice: false,
      tableConfig: {
        select: true,
        data: [],
        column: [],
        buttonArr: [],
        buttonWidth: 140
      },
      btnConfig: [
        {
          name: "add",
          text: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "",
          methons: () => {
            this.add();
          }
        },
        {
          name: "edit",
          text: "编辑",
          icon: "el-icon-edit-outline",
          type: "",
          methons: () => {
            this.edit();
          }
        }
      ],
      //操作栏按钮
      btnArr: [],
      //组织树选择人员
      orgMemberSelect: {},
      dialogType: "",
      show: false,
      deptItem: {},
      rules: {},
      currentItem: null,
      currentRow: null,
      formConfig: {}
    };
  },
  computed: {
    rowProp() {
      let row = new Object();
      this.tableConfig.column.map(i => {
        row[i.prop] = "";
      });
      return row;
    }
  },

  watch: {
    "tableSetting.maxHeight"() {
      this.tableConfig.maxHeight = this.tableSetting.maxHeight;
    },
    "tableSetting.title"() {
      this.title = this.tableSetting.title;
    },
    "tableSetting.data": {
      handler(val) {
        this.tableConfig.data = val;
      },
      deep: true
    },
    "tableConfig.data": {
      handler(val) {
        this.$emit("changeTableData", val);
      },
      deep: true
    },
    tableData: {
      handler(val) {
        if (val.length >= 0) {
          this.setTableData(val);
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.setTableHeight();
  },
  methods: {
    init() {
      let {
        btnArr,
        column,
        title,
        data,
        select,
        maxHeight,
        height,
        buttonArr,
        buttonWidth
      } = this.tableSetting;
      this.btnArr = btnArr || [];
      this.title = title || "";
      this.tableConfig.column = column || [];
      /* 优先tableData里面的值 */
      if (this.tableData.length > 0) {
        this.tableConfig.data = this.tableData;
      } else {
        this.tableConfig.data = data || [];
      }
      this.tableConfig.select = select;
      this.tableConfig.maxHeight = maxHeight;
      this.tableConfig.height = height;
      this.tableConfig.buttonArr = buttonArr;
      this.tableConfig.buttonWidth = buttonWidth ? buttonWidth : 140;
      this.tableConfig.data.map((i, index) => {
        i.rowIndex = index;
        // i.editable = false;
      });
      let rules = {};
      this.tableConfig.column.map(i => {
        if (i.required) {
          rules[i.prop] = [];
          let message = "";
          if (i.type === "text" || i.type === "textarea") {
            message = `请输入`;
          } else {
            message = `请选择`;
          }
          if (["dept-select", "user-select"].includes(i.type)) {
            rules[i.propArr] = [];
            rules[i.propArr].push({
              required: true,
              message: message + i.label,
              trigger: i.trigger || "blur"
            });
          } else {
            rules[i.prop] = [];
            rules[i.prop].push({
              required: true,
              message: message + i.label,
              trigger: i.trigger || "blur"
            });
          }
          if (i.rules) {
            rules[i.prop].push(i.rules);
          }
        }
      });
      this.rules = Object.assign({}, rules);
    },
    mustColumnMethods(obj) {
      if (this.mustColumn.includes(obj.columnIndex)) {
        return "must";
      }
    },
    headerStyle() {
      return {};
    },
    showBtn(btn) {
      return this.btnArr.indexOf(btn) != -1;
    },
    setColumnOption(name, value) {
      let column = this.tableConfig.column;
      for (let i in column) {
        if (column[i].prop == name) {
          column[i].seleteOption = value;
          break;
        }
      }
    },
    setColumn(name, value) {
      let newColumn = [];
      let column = this.tableConfig.column;
      for (let i = 0; i < column.length; i++) {
        if (!column[i].prop == name) {
          newColumn.push(column[i]);
        } else {
          newColumn.push(value);
        }
      }
    },
    changeSeleteGroup(val, item, row) {
      if (item.methods) {
        item.methods(val, row, item);
      }
    },
    //日期数据处理
    dateFrm(type) {
      if (type === "date" || type === "daterange") {
        return "yyyy-MM-dd";
      } else if (type == "datetime" || type === "datetimerange") {
        return "yyyy-MM-dd HH:mm";
      } else if (type == "month") {
        return "yyyy-MM";
      } else if (type == "year") {
        return "yyyy";
      } else {
        return "";
      }
    },
    //点击新增
    add() {
      let len = this.tableConfig.data.length;
      let rowIndex = 0;
      if (len) {
        rowIndex = this.tableConfig.data[len - 1].rowIndex + 1;
      }
      let nRow = Object.assign(
        {},
        { rowIndex: rowIndex, editable: true, isChange: false },
        this.rowProp
      );

      if (this.tableSetting.addMethons) {
        this.$emit(
          "handleClickAdd",
          nRow,
          JSON.parse(JSON.stringify(this.tableConfig.data))
        );
      } else {
        //如果没有外部新增方法，则新增一行
        this.tableConfig.data.push(nRow);
      }
    },
    //编辑表格
    edit() {
      this.tableConfig.data.forEach(item => {
        item.editable = true;
      });
    },
    //返回表单数据
    getFormData() {
      let { data } = this.tableConfig;
      return data;
    },
    //获取表格数据
    getTableData(needValid = true) {
      return new Promise((resolve, reject) => {
        let { data } = this.tableConfig;
        data = JSON.parse(JSON.stringify(data));
        if (needValid) {
          data.forEach(i => {
            delete i.rowIndex;
            delete i.editable;
          });
        }
        if (!needValid) {
          resolve(data);
          return;
        }
        this.$refs.formTable.validate(valid => {
          if (valid) {
            resolve(data);
          } else {
            reject("列表未填写完整");
          }
        });
      });
    },
    outOrgSign(data) {
      if (data.isOutOrg) {
        if (data.isOutOrg == "-1") {
          return "(临)";
        } else if (data.isOutOrg == "1") {
          return "(外)";
        } else if (data.isOutOrg == "0") {
          return "";
        }
      } else {
        return "";
      }
    },
    //设置表单数据
    setTableData(data) {
      data = JSON.parse(JSON.stringify(data));
      data.map((i, index) => (i.rowIndex = index));
      this.$set(this.tableConfig, "data", [...data]);
    },
    //追加data
    pushData(data) {
      let arr = [...data];
      arr.map(i => {
        this.tableConfig.data.push(i);
      });
    },
    //下拉框选择
    changeSelete(val, item, row) {
      let option = item.seleteOption;
      if (item.text) {
        let type = typeof val;
        let valText = "";
        let arr = [];
        if (type == "string") {
          arr = option.filter(i => i.value == val);
        } else {
          arr = [...option].filter(x => [...val].some(y => x.value == y));
        }
        if (arr) {
          arr = arr.map(i => {
            return i.label;
          });
          valText = arr.join();
        }
        row[item.text] = valText;
      }
      if (item.methods) {
        let option = item.seleteOption;
        let selectItem = {};
        if (item.type == "select") {
          for (let i in option) {
            if (option[i].value == val) {
              selectItem = option[i];
              break;
            }
          }
        } else if (item.type == "select-group") {
        }
        item.methods(row, val, selectItem);
      }
    },
    //选择组织人员
    goSeleteOrgMember(row, item, type) {
      this.currentItem = item;
      this.currentRow = row;
      let value = row[item.prop] || "";
      let ids = row[item.idsStr] || "";

      let arr = value ? value.split(",") : [];
      let idsArr = ids ? ids.split(",") : [];

      let chosedData = [];
      let typePre = type.split("-")[0];
      let typeBre = type.split("-")[1];
      if (typeBre == "select") {
        typeBre = "";
      }
      if (typePre == "dept") {
        this.dialogTitle = "选择组织";
        this.orgMemberSelect = {
          seleteType: typeBre ? typeBre : "org",
          radio: !(item.multiple || row.multiple), //单选还是多选
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "组织",
              prop: "name"
            }
          ],
          chosedData: []
        };
        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (typePre == "user") {
        this.dialogTitle = "选择人员";
        this.orgMemberSelect = {
          seleteType: typeBre ? typeBre : "orgmember",
          radio: !(item.multiple || row.multiple), //单选还是多选
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "用户名",
              prop: "name",
              width: 60
            },
            {
              label: "电话",
              prop: "phone",
              width: 100
            }
          ],
          chosedData: []
        };

        let deptCode = item.deptCodeStr
          ? this.editFormData[item.deptCodeStr] || ""
          : ""; //部门code
        let deptName = item.deptStr
          ? this.editFormData[item.deptStr] || ""
          : ""; //部门名称
        let phone = item.phoneStr ? this.editFormData[item.phoneStr] || "" : ""; //手机号
        let deptCodeArr = deptCode ? deptCode.split(",") : [];
        let deptNameArr = deptName ? deptName.split(",") : [];
        let phoneArr = phone ? phone.split(",") : [];
        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];

          obj.deptCode = deptCodeArr[index] || "";
          obj.deptName = deptNameArr[index] || "";
          obj.phone = phoneArr[index] || "";

          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (type == "deviceClassify") {
        //选设备分类
        this.dialogTitle = "选设备分类";
        this.orgMemberSelect = {
          seleteType: "deviceClassify",
          radio: !(item.multiple || row.multiple),
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "分类名称",
              prop: "name"
            }
          ],
          chosedData: []
        };

        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (type == "device") {
        //选设备
        this.dialogTitle = "选择设备";
        this.orgMemberSelect = {
          seleteType: "device",
          radio: !(item.multiple || row.multiple),
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "设备名称",
              prop: "name"
            }
          ],
          chosedData: []
        };

        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      } else if (typePre == "location") {
        //选位置
        this.dialogTitle = "选择位置";
        this.orgMemberSelect = {
          seleteType: "location",
          radio: !item.multiple,
          props: {
            label: "name",
            children: "children"
          },
          column: [
            {
              label: "位置名称",
              prop: "name"
            }
          ],
          chosedData: []
        };
        arr.map((i, index) => {
          let obj = {};
          obj.id = idsArr[index];
          obj[this.orgMemberSelect.column[0].prop] = arr[index];
          chosedData.push(obj);
        });
      }
      this.orgMemberSelect.chosedData = chosedData;
      this.dialogType = type;
      this.show = true;
    },
    //确定选择
    addSeleteMember() {
      let data = this.$refs.orgMemberSelect.getSeleteData();
      //把数据同步到输入查询
      data.map(i => {
        i.label = i.name;
        i.value = i.id;
      });
      if (
        ["dept-select", "user-select", "location-select"].includes(
          this.dialogType
        )
      ) {
        this.setConfigArrOption(this.currentItem, data);
      }
      let names = "";
      let ids = "";
      let idsArr = [];
      if (data) {
        names = data
          .map(i => {
            return i[this.orgMemberSelect.column[0].prop];
          })
          .join();
        ids = data
          .map(i => {
            idsArr.push(i.id);
            return i.id;
          })
          .join();
      }
      if (this.currentItem.propArr) {
        if (this.currentItem.multiple) {
          //多选
          this.currentRow[this.currentItem.propArr] = idsArr;
          //this.setFormItem(this.currentItem.propArr, idsArr);
        } else {
          //单选
          this.currentRow[this.currentItem.propArr] = idsArr[0];
          //this.setFormItem(this.currentItem.propArr, idsArr[0]);
        }
      }
      if (this.currentItem.idsStr) {
        this.currentRow[this.currentItem.idsStr] = ids;
        //this.$set(this.editFormData, this.currentItem.idsStr, ids);
      }
      this.currentRow[this.currentItem.prop] = names;
      //this.$set(this.editFormData, this.currentItem.prop, names);
      this.show = false;
      if (this.currentItem.methods) {
        this.currentItem.methods(this.currentRow, data);
      }
    },
    //打开选人组件
    goSelectUser(row, item, type) {
      if (item.disabled) {
        return false;
      }
      this.currentItem = item;
      this.currentRow = row;
      let Names = this.editFormData[item.prop]
        ? this.editFormData[item.prop].split(",")
        : [];
      let Ids = this.editFormData[item.idsStr]
        ? this.editFormData[item.idsStr].split(",")
        : [];
      let orgNames = this.editFormData[item.orgNameStr]
        ? this.editFormData[item.orgNameStr].split(",")
        : [];
      let orgIds = this.editFormData[item.orgIdStr]
        ? this.editFormData[item.orgIdStr].split(",")
        : [];
      let orgStr = this.editFormData[item.orgStr]
        ? this.editFormData[item.orgStr].split(",")
        : [];
      let chosedData = [];
      if (["device-select", "device"].includes(type)) {
        this.orgMemberSelect = {
          multiple: item.multiple === undefined ? false : item.multiple, //单选还是多选
          chosedData: [],
          defaultIds: item.defaultIds === undefined ? [] : item.defaultIds,
          filterConfig:
            item.filterConfig === undefined ? [] : item.filterConfig,
          managerUnit: item.managerUnit === undefined ? [] : item.managerUnit,
          standardType: item.standardType === undefined ? "" : item.standardType
        };
        Names.map((i, index) => {
          let obj = {};
          obj.id = Ids[index];
          obj.name = Names[index] || "";
          chosedData.push(obj);
        });
        this.orgMemberSelect.chosedData = chosedData;
        this.showDevice = true;
      } else {
        this.orgMemberSelect = {
          type: type,
          multiple: item.multiple === undefined ? false : item.multiple, //单选还是多选
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          chosedData: [],
          level: item.level === undefined ? null : item.level,
          defaultOrg: item.defaultOrg === undefined ? "" : item.defaultOrg,
          defaultIds: item.defaultIds === undefined ? [] : item.defaultIds
        };
        Names.map((i, index) => {
          let obj = {};
          obj.id = Ids[index];
          obj.name = Names[index] || "";
          obj.orgName = orgNames[index] || "";
          obj.orgId = orgIds[index] || "";
          obj.isOutOrg = orgStr[index];
          chosedData.push(obj);
        });
        this.orgMemberSelect.chosedData = chosedData;
        this.showUser = true;
      }
      this.dialogType = type;
    },
    //确定选择人员
    newMemberSelect() {
      let data = this.$refs.newMember.getSelectData();
      //把数据同步到输入查询
      data.map(i => {
        i.label = i.name;
        let value = i.orgId ? i.orgId : "";
        i.value = i.id + value;
      });
      if (
        [
          "dept-select",
          "user-select",
          "location-select",
          "device-select"
        ].includes(this.dialogType)
      ) {
        this.setConfigArrOption(this.currentItem, data);
      }
      let names = "";
      let ids = "";
      let orgNames = "";
      let orgIds = "";
      let orgArr = "";
      let idsArr = [];
      if (data) {
        names = data.map(i => i.name).join();
        ids = data
          .map(i => {
            idsArr.push(i.value);
            return i.id;
          })
          .join();
        orgNames = data.map(i => i.orgName).join();
        orgIds = data.map(i => i.orgId).join();
        orgArr = data.map(i => i.isOutOrg).join();
      }
      if (this.currentItem.propArr) {
        if (this.currentItem.multiple) {
          //多选
          this.setFormItem(this.currentItem.propArr, idsArr);
        } else {
          //单选
          this.setFormItem(this.currentItem.propArr, idsArr[0]);
        }
      }
      if (this.currentItem.idsStr) {
        this.$set(this.editFormData, this.currentItem.idsStr, ids);
      }
      if (this.currentItem.orgNameStr) {
        this.$set(this.editFormData, this.currentItem.orgNameStr, orgNames);
      }
      if (this.currentItem.orgIdStr) {
        this.$set(this.editFormData, this.currentItem.orgIdStr, orgIds);
      }
      if (this.currentItem.orgStr) {
        this.$set(this.editFormData, this.currentItem.orgStr, orgArr);
      }
      this.$set(this.editFormData, this.currentItem.prop, names);
      this.showUser = false;
      this.showDevice = false;
      if (this.currentItem.methods) {
        this.currentItem.methods(data, this.editFormData);
      }
    },
    //选项框消失后就只保留已选中的选项
    async clearOther(val, item) {
      if (!val) {
        //选项框消失时
        //当前已选中的所有项
        let propArr = this.editFormData[item.propArr] || [];
        //多选时数组propArr为数组
        let option = item.option;
        let selectItem = [];
        option.map(i => {
          if (propArr.includes(i.value)) {
            selectItem.push(i);
          }
        });
        let config = this.editFormConfig.itemArr;
        for (let k in config) {
          if (config[k].prop == item.prop) {
            //找到相应的项
            //
            config[k].option = selectItem;
            break;
          }
        }
        this.count = 1;
        // //调用自定义的方法
        // if (item.methods) {
        //   item.methods(selectItem || {});
        // }
      }
      if (val && item.type == "equipmentBrand") {
        let form = {
          page: 1,
          pageSize: 20
        };
        this.selectLoading = true;
        let res = await brandStockList(form);
        let data = res.data.records || [];
        data.map(i => {
          i.label = i.name;
          i.value = i.id;
        });
        this.setConfigArrOption(item, data);
        this.count = 1;
        this.selectLoading = false;
      }
    },
    //可输入查询人员组织，查询人员和组织的数据
    async getSelectOption(query, item) {
      if (query !== "") {
        let typePre = item.type.split("-")[0];
        let form = {
          name: query,
          outOrg: item.isOutOrg === undefined ? "" : item.isOutOrg, //是否是外单位
          level: item.level === undefined ? null : item.level
        };
        this.query = query;
        let actionApi = null;
        if (typePre == "dept") {
          actionApi = getOrgList;
        } else if (typePre == "user") {
          actionApi = queryUserList;
        } else if (typePre == "location") {
          //暂时没有要求要输入选择
        } else if (typePre == "device") {
          form.page = 1;
          form.pageSize = 20;
          actionApi = queryList;
        } else {
          actionApi = queryDefectList;
        }
        let res;
        if (typePre == "device") {
          res = await actionApi(form);
        } else {
          res = await actionApi(form);
        }
        let data;
        if (typePre == "device") {
          data = res.data.list || [];
        } else {
          data = res.data || [];
        }
        data.map(i => {
          i.label = i.name;
          let value = i.orgId ? i.orgId : "";
          i.value = i.id + value;
        });
        //是否可自创条目;query.match(/^[ ]*$/)判断是否是空格组成的
        if (item.allowCreate && !query.match(/^[ ]*$/)) {
          let addItem = {
            label: query,
            value: query,
            id: query,
            orgName: "",
            orgId: "",
            isOutOrg: "-1"
          };
          data.push(addItem);
        }
        this.selectOption = data;
        this.setConfigArrOption(item, data);
      }
    },
    //设置选人选组织的预选项
    setConfigArrOption(item, data) {
      let oldOption = item.option || [];
      //当前已选中的所有项
      let propArr = this.editFormData[item.propArr] || [];
      //已选择的项
      let selectOption = [];
      oldOption.map(i => {
        if (propArr.includes(i.value)) {
          selectOption.push(i);
        }
      });
      let option = [];
      data.map(i => {
        if (!propArr.includes(i.value)) {
          //去掉已有项
          option.push(i);
        }
      });
      //将搜索结果跟已选中的项数据合并
      option = selectOption.concat(option);
      let config = this.editFormConfig.itemArr;
      for (let k in config) {
        if (config[k].prop == item.prop) {
          //找到相应的项
          config[k].option = option;
          break;
        }
      }
    },
    //下拉框选择时回传
    selectChange(val, item) {
      this.$forceUpdate();
      //基础选择器
      if (item.type == "select") {
        if (item.methods) {
          let ops = item.selectOption;
          if (item.multiple === true) {
            let arr = ops.filter(i => val.indexOf(i.value) > -1);
            item.methods(arr, this.editFormData);
          } else {
            let obj = ops.find(i => i.value == val);
            item.methods(obj || {}, this.editFormData);
          }
        }
      } else if (
        ["dept-select", "user-select"].includes(item.type) &&
        !item.multiple
      ) {
        //选组织、选人单选,与点击按钮选择之间同步数据
        let propArr = this.editFormData[item.propArr];
        let option = item.option;
        let selectItem = {};
        let isExist = false;
        for (let i in option) {
          if (propArr == option[i].value) {
            selectItem = option[i];
            isExist = true;
            break;
          }
        }
        if (isExist) {
          //存在，即非自创条目
          this.setFormItem(item.prop, selectItem.label);
          this.setFormItem(item.idsStr, selectItem.id);
          this.setFormItem(item.orgNameStr, selectItem.orgName);
          this.setFormItem(item.orgIdStr, selectItem.orgId);
          this.setFormItem(item.orgStr, selectItem.isOutOrg);
        } else {
          //不存在，即自创条目
          this.setFormItem(item.prop, val);
          this.setFormItem(item.idsStr, val);
          this.setFormItem(item.orgNameStr, "");
          this.setFormItem(item.orgIdStr, "");
          this.setFormItem(item.orgStr, "-1");
        }
        //调用自定义的方法
        if (item.methods) {
          item.methods([selectItem] || {});
        }
      } else if (
        ["dept-select", "user-select"].includes(item.type) &&
        item.multiple
      ) {
        //选组织、选人多选,与点击按钮选择之间同步数据
        //当前已选中的所有项
        let propArr = this.editFormData[item.propArr] || [];
        let str = propArr.toString();
        //最后一次点击的项
        let selectItem = propArr[propArr.length - 1];
        //多选时数组propArr为数组
        let option = item.option;
        //是否是用户自创条目
        let isCreatItem = true;
        //判断是否是用户创建的条目
        for (let i in option) {
          if (option[i].value == selectItem) {
            isCreatItem = false;
            break;
          }
        }
        //如果是用户自创的条目要把它加入Option里面
        if (isCreatItem) {
          let item = {
            label: selectItem,
            value: selectItem,
            id: selectItem,
            orgName: "",
            orgId: "",
            isOutOrg: "-1"
          };
          option.push(item);
        }
        //所有选中的名字
        let nameArr = [];
        let idArr = [];
        let orgArr = [];
        let orgNameArr = [];
        let orgIdArr = [];
        let selectItemArr = [];
        //备选项里是否含有当前选中的值，可以以此来判断是否是用户新建的条目
        option.map(i => {
          if (propArr.includes(i.value)) {
            nameArr.push(i.label);
            idArr.push(i.id);
            orgArr.push(i.isOutOrg);
            orgNameArr.push(i.orgName);
            orgIdArr.push(i.orgId);
            selectItemArr.push(i);
          }
        });
        this.setFormItem(item.prop, nameArr.toString());
        this.setFormItem(item.idsStr, idArr.toString());
        this.setFormItem(item.orgNameStr, orgNameArr.toString());
        this.setFormItem(item.orgIdStr, orgIdArr.toString());
        this.setFormItem(item.orgStr, orgArr.toString());
        //调用自定义的方法
        if (item.methods) {
          item.methods(selectItemArr || []);
        }
        this.$refs.selectItem.forEach(item => {
          item.query = "";
        });
        this.$emit("selectChange");
      }
    },
    //值改变事件（除下拉框）
    inputChange(val, item, row) {
      if (item.methods) {
        item.methods(row, val, item);
      }
    },
    //输入框搜索输入时触发
    querySearchAsync(item) {
      return (queryString, cb) => {
        var restaurants = item.selectOption.map(i => {
          return { ...i };
        });
        var results = queryString
          ? restaurants.filter(this.createStateFilter(queryString))
          : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 500 * Math.random());
      };
    },
    /**判断空值默认- */
    formatterNull(text) {
      if (text === null || text === undefined || text === "") {
        return "-";
      } else {
        return text;
      }
    },
    /**修改表格默认值 */
    setDefalutData(form) {
      this.tableConfig.data.map((i, index) => {
        let obj = Object.assign({}, i, form);
        this.$set(this.tableConfig.data, index, obj);
      });
    },
    /**禁止输入框滚动事件 */
    stopScrollFun(evt, type) {
      if (type !== "number") {
        return true;
      }
      evt = evt || window.event;
      if (evt.preventDefault) {
        // Firefox
        evt.preventDefault();
        evt.stopPropagation();
      } else {
        // IE
        evt.cancelBubble = true;
        evt.returnValue = false;
      }
      return false;
    },
    /**设置最大高度 */
    setTableHeight() {
      let { height, maxHeight, autoHeight } = this.tableSetting;
      if (!height && !maxHeight && !autoHeight) {
        let parentH = this.$refs.editTableBox.parentElement.clientHeight;
        parentH = parentH - 68;
        this.tableConfig.height = parentH < 300 ? 300 : parentH;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.editTable {
  /deep/.el-form {
    .el-form-item {
      .el-form-item__content {
        line-height: 40px;
        position: relative;
        font-size: 14px;
        .el-textarea {
          display: block;
        }
      }
    }
  }
  /deep/.el-table th.must > .cell:before {
    content: "*";
    color: #ff1818;
  }
}
.edit-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.edit-table-toolbar__title {
  font-weight: bold;
  margin-left: 10px;
}
.table-cloumn__span--tooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/deep/ .switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}
/deep/ .switch .el-switch__label--right {
  z-index: 1;
}
/deep/ .switch .el-switch__label--right span {
  margin-left: -5px;
}
/deep/ .switch .el-switch__label--left {
  z-index: 1;
}
/deep/ .switch .el-switch__label--left span {
  margin-left: 21px;
}
/deep/ .switch .el-switch__label.is-active {
  display: block;
}
</style>